<template>
  <div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司全称:
    <el-input v-model="form.name" style="width:240px;" placeholder="请准确填写公司全称"></el-input>
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司简称:
    <el-input v-model="form.jName" style="width:180px;" placeholder="4或5个汉字"></el-input>
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;接单电话:
    <el-input v-model="form.phone" style="width:180px;" placeholder="区号-号码"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注: 默认为账号手机,可修改,支持固定电话
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系人:
    <el-input v-model="form.contact" style="width:180px;" placeholder="业务负责人"></el-input>
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;官方网站:
    <el-input v-model="form.website" style="width:230px;" placeholder="http://www.lvmae.com"></el-input>
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;办公地址:
    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="getAddress"></el-cascader>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="form.xAddress" style="width:300px;" placeholder="详细地址,精确到门牌号"></el-input>
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGO:
    <div style="margin-top: -20px;margin-left: 120px;">
      <el-upload
        class="avatar-uploader"
        ref="upload1"
        action
        :auto-upload="false"
        :limit="1"
        multiple
        accept="application/jpg"
        :file-list="fileList"
        list-type="picture"
        :on-change="handlerChange"
        style="width:180px;"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务宗旨:
    <el-input v-model="form.aim" style="width:260px;"></el-input>
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司介绍:
    <textarea
      v-model="form.tDesc"
      placeholder="请输入公司介绍 "
      style="height:100px;width:300px;"
    ></textarea>
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优势服务行业:
    <div style="width:950px;margin-top: -20px;margin-left: 150px;">
      <el-checkbox-group v-model="form.checkList">
        <el-checkbox v-for="bean in typeList" :key="bean.id" :label="bean.id">{{bean.typeName}}</el-checkbox>
      </el-checkbox-group>
      <br />
      <el-button type="success" size="medium" icon="el-icon-star-off" @click="addCompany">保 存</el-button>
    </div>
  </div>
</template>
<script>
var quan;
import { regionData, CodeToText } from "element-china-area-data";
export default {
  name: "app",
  data() {
    return {
      form: {
        name: "",
        jName: "",
        phone: "",
        contact: "",
        website: "",
        address: "",
        xAddress: "",
        aim: "",
        tDesc: "",
        checkList: []
      },
      selectedOptions: [],
      imageUrl: "",
      options: regionData,
      fileList: [],
      typeList: []
    };
  },
  mounted: function() {
    quan = this;
    quan.getTypeList();
  },
  methods: {
    getTypeList: function() {
      quan.axios
        .get("http://localhost:9999/basic/tmsCompany/getTypeList", {
          params: {
            access_token: localStorage.getItem("access_token")
          }
        })
        .then(function(res) {
          quan.typeList = res.data.obj;
        });
    },
    getAddress(value) {
      let data =
        CodeToText[value[0]] +
        "/" +
        CodeToText[value[1]] +
        "/" +
        CodeToText[value[2]];
      quan.form.address = data;
    },
    handlerChange(file, files) {
      quan.fileList = files;
    },
    addCompany: function() {
      var formData = new FormData();
      //将原来form 的值添加到 formData中
      for (var i in this.form) {
        formData.append(i, quan.form[i]);
      }
      quan.fileList.forEach(function(file) {
        if (file.raw) {
          formData.append("files", file.raw, file.name);
        }
      });
      //设置图片上传的格式
      let config = {
        "Content-Type": "multipart/form-data"
      };
      quan
        .axios({
          method: "post",
          url:
            "http://localhost:9999/basic/tmsCompany/addCompany?access_token=" +
            localStorage.getItem("access_token"),
          data: formData,
          config: config
        })
        .then(function(res) {
          quan.$message({
            message: res.data.msg,
            type: "success"
          });
          if (res.data.code == 200) {
            window.location.reload();
          }
        });
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 3px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 178px;
  display: block;
}
</style>